<template>
	<view class="cate_box">
		<view class="cate_item" v-for="(item,index) in cateList.slice(0,7)" :key='index'>
			{{ item.name }}
		</view>
		<view class="">
			全部分类
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		props: {
			cateList: {
				type: Array,
				default: () => []
			}
		},
		methods: {

		}
	}
</script>

<style lang='scss'>
	.cate_box {
		display: flex;
		// 换行，
		flex-wrap: wrap;
		// 两侧的间隔相等
		justify-content: space-around;
		padding: 20rpx 30rpx 0 30rpx;

		>view {
			width: 160rpx;
			height: 70rpx;
			background-color: $mxg-color-grey;
			line-height: 70rpx;
			text-align: center;
			font-size: 26rpx;
			margin-top: 15rpx;
			// 文字超出宽度隐藏
			overflow: hidden;
			border-radius: 20rpx;
		}
	}
</style>
